<template>
  <div class="home">
    <p>
      <i class="el-icon-s-promotion"></i>
      地产详情
    </p>
    <el-card class="page-wrap">
      <el-table :data="list">
        <el-table-column label="封面">
          <template v-slot="{ row }">
            <img :src="row.image" alt="" style="
                 {
                  width: 100px;
                  height: 100px;
                }
              "/>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="标签">
          <template v-slot="{row}">
            <el-tag
              v-for="(item,index) in row.tags"
              :key="index"
              effect="plain"
            >
              {{ item}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="分类" prop="category"></el-table-column>
        <el-table-column label="经纪" prop="agent"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="介绍" prop="content"></el-table-column>
        <el-table-column label="图片">
          <template v-slot="{ row }">
            <img
              :src="item"
              alt=""
              v-for="(item, index) in row.photos"
              :key="index"
              style="
                 {
                  width: 100px;
                  height: 100px;
                }
              "
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination 
        background
        :total="total"
        layout="prev, pager, next"
        :page-size="pageConfig._limit"
        @current-change="currentChange"
      >
      </el-pagination> -->
    </el-card>
  </div>
</template>

<script>
import { getDetail } from "@/api/sort.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getDetailList();
  },
  methods: {
    async getDetailList() {
      const id = this.$route.query.id;
      const res = await getDetail(id);
      console.log("res", res);
      this.list = res.properties;
      console.log("sb", this.list);
      // this.list = res
    },
    // currentChange(page) {
    //   this.pageConfig._start = (page - 1) * this.pageConfig._limit;
    //   this.getList();
    // },
  },
};
</script>
<style lang="less" scoped>
h2 {
  font-weight: normal;
  font-size: 28px;
  text-align: center;
}
.home {
  width: 60%;
  margin: 20px auto;
  p {
    color: #fba320;
    i {
      font-size: 24px;
    }
  }
  .page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    .el-card__body {
      width: 100%;
      height: 100%;
      .main {
        width: 100%;
        height: 100%;
        background-color: pink;
      }
    }
  }
}
::v-deep .el-card__body {
  padding: 10px;
}
</style>
